<template>
	<view class="exemption-page">
		<!-- 头部 -->
		<view class="exemption-header">
			<view class="exemption-header-v">
				<image class="test1" @click="backClick" src="../../static/search-img/左箭头.png"></image>
				<text>{{page_title}}</text>
				<image class="test1" src="../../static/home/conent/列表选择.png"></image>
			</view>
		</view>
		<!-- 商品价格 -->
		<view class="com-tabs-price">
			<view :class="topOptThat ? 'opt-style-price' : ''" @click="topClcikChangeEvent(1)"><text>9块9包邮</text></view>
			<view :class="!topOptThat ? 'opt-style-price' : ''" @click="topClcikChangeEvent(0)"><text>20元有好货</text></view>
		</view>
		<!-- 商品类型 -->
		<view class="com-tabs-type">
			<view class="" v-for="(i, idx) in setType" :key="idx" @click="changeGoodesEvent(i.material_id)">
				<text :class="i.material_id == itemType ? 'opt-style-type' : ''">{{ i.name | getTypeTextFil }}</text>
			</view>
		</view>
		<!-- tabs组件 -->
		<view class="exemption-tabs"><mstabs :tabData="testData" @tabClick="aplayModuler"></mstabs></view>
		
		<!-- 商品列表组件 -->
		<view class=""><goodsitem :goodesList="goodesList" :isInfoShow="true"></goodsitem></view>
		
		<!-- 点击向上 -->
		<view><click-up v-show="isTopEvent"></click-up></view>
		
		<!-- 搜索 -->
		<view><goode-search  v-show="isTopEvent"></goode-search></view>
	</view>
</template>

<script>
//vuex映射
import { mapState, mapActions, mapMutations } from 'vuex';
// 引入组件 tabs组件
import mstabs from '../../components/liuyuno-tabs/liuyuno-tabs.vue';
//商品item组件
import goodsitem from '../../components/goods-item/goodsItem.vue';


//引入点击向上组件
import clickUp from '../../components/click-up/click-up.vue';

// 引入搜索组件
import goodeSearch from '../../components/goods-search/itemSearch.vue';

export default {
	data() {
		return {
			page_title:"9.9包邮",
			
			
			//选择哪个优惠价格
			topOptThat: true,

			preferential: 9.9,

			//选择哪个商品类型
			itemType: '',
			//是否默认渲染
			isShowItemDefault: true,
			//tabs
			testData: ['默认排序', '优惠券', '销量', '价格'],
			//第几个标签
			active: 0,
			
			//是否为顶部
			isTopEvent: false,
			
			//加载更多时使用的url
			loadMoreUrl: '/command?',
		};
	},
	mounted() {
		this.getGoodesType();

		this.reqBasicsGoodesList({ active: this.active, preferential: this.preferential }).then(data => {
			console.log(data);
		});
	},
	// 监听页面滚动
	onPageScroll(v) {
		if (v.scrollTop > 600) {
			this.isTopEvent = true;
		} else {
			this.isTopEvent = false;
		}
	},
	//触发到底部事件
	onReachBottom() {
		//加载更多
		this.reqExemptionLoadMore({active: this.active, preferential: this.preferential,url:this.loadMoreUrl})
	},
	methods: {
		...mapActions(['getGoodesType', 'reqBasicsGoodesList', 'reqHomeGoodesTypeList','reqExemptionLoadMore']),
		//渲染方式方法
		aplayModuler(v) {
			this.active = v;
			this.reqBasicsGoodesList({ active: this.active, preferential: this.preferential }).then(data => {
				console.log(data);
			});
		},
		// 返回按钮
		backClick() {
			console.log('执行');
			uni.switchTab({
				url: '../index/index'
			});
		},
		//点击了哪个价格
		topClcikChangeEvent(v) {
			if (v) {
				this.topOptThat = v;
				this.preferential = 9.9;
				this.page_title='9.9包邮'
			} else {
				this.topOptThat = false;
				this.preferential = 20;
				this.page_title='20元封顶'
			}
			if (this.isShowItemDefault) {
				this.reqBasicsGoodesList({ active: this.active, preferential: this.preferential }).then(data => {});
			} else {
				this.reqHomeGoodesTypeList({ active: this.active, idx: this.itemType, preferential: this.preferential });
			}
		},
		//点击了哪个商品类型
		changeGoodesEvent(e) {
			this.itemType = e;
			//取消默认渲染
			this.isShowItemDefault=false;
			this.loadMoreUrl=`/hot?material_id=${e}`
			this.reqHomeGoodesTypeList({ active: this.active, idx: this.itemType, preferential: this.preferential });
		}
	},

	filters: {
		getTypeTextFil(v) {
			switch (v) {
				case '女装':
					return '女装';
				case '家居家装':
					return '日用';
				case '数码家电':
					return '数码';
				case '鞋包配饰':
					return '鞋品';
				case '美妆个护':
					return '美妆';
				case '男装':
					return '男装';
				case '内衣':
					return '内衣';
				case '母婴':
					return '母婴';
				case '食品':
					return '美食';
				case '运动户外':
					return '运动';
				default:
					return '';
			}
		}
	},
	computed: {
		...mapState({
			setType: state => state.home_idx.goodesType,
			goodesList: state => state.exemption_idx.basicsGoodesList
		})
	},
	components: {
		mstabs,
		goodsitem,
		goodeSearch,
		clickUp,
	}
};
</script>

<style lang="scss">
.exemption-page {
	height: calc(100vh - 50px);
	color: #666;
	// 设置头部导航
	.exemption-header {
		background: linear-gradient(138deg, #f40497, #f81131);
		width: 100%;
		.exemption-header-v {
			margin: 0 auto;
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			font-size: 35upx;
			color: #ffffff;
			height: 46px;
			image {
				width: 57upx;
				height: 57upx;
			}
			text {
				width: 80%;
			}
		}
	}

	//设置tabs-preice 价格
	.com-tabs-price {
		display: flex;
		width: 100%;
		background-color: #ffffff;
		font-size: 30rpx;
		view {
			flex: 1;
			// background-color: red;
			height: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.opt-style-price {
			color: #ff6600;
			border-bottom: 6rpx solid #ff6600;
			font-weight: 800;
		}
	}

	//设置tabs-type 类型
	.com-tabs-type {
		width: 100vw;

		border-top: 15rpx solid rgba(236, 236, 236, 1);
		border-bottom: 15rpx solid rgba(236, 236, 236, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		view {
			width: 19%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60rpx;
			font-size: 30rpx;
			color: #666;
			cursor: pointer;
		}
		.opt-style-type {
			color: #f8285c;
			border-bottom: 4rpx solid #f8285c;
		}
	}

	//设置排序方式
	.exemption-tabs {
		border-bottom: 15rpx solid rgba(236, 236, 236, 1);
	}
}
</style>
